﻿<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<html>
<head>
    <title></title>
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript">
        'use strict';

        // Set the style of the client web part page to be consistent with the host web.
        (function () {
            var hostUrl = '';
            if (document.URL.indexOf('?') != -1) {
                var params = document.URL.split('?')[1].split('&');
                for (var i = 0; i < params.length; i++) {
                    var p = decodeURIComponent(params[i]);
                    if (/^SPHostUrl=/i.test(p)) {
                        hostUrl = p.split('=')[1];
                        document.write('<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />');
                        break;
                    }
                }
            }
            if (hostUrl == '') {
                document.write('<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />');
            }
        })();
    </script>
    <script type="text/javascript" src="../Scripts/BucketListViewModel.js"></script>
    <script type="text/javascript" src="../Scripts/App.js"></script>
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
</head>
<body>
    <div id="appContainer">
        <div class="bucketList">
            <ul data-bind="foreach: items">
		        <li>
                    <div class="bucketNumber"><input type="checkbox" data-bind="checked: done" />
                                              <span data-bind="text: $root.itemNumber($index())"></span>&nbsp;
                                              <span data-bind="text: title"></span>
                    </div>
                    <div class="bucketDelete">
                       <a href="#" data-bind="click: $root.removeBucketItem">	                            
                        <img src="../images/remove.png" alt="delete"/>
                       </a>
                    </div>
		        </li>
		    </ul>
        </div>
        <div class="bucketAdd">
            <input type="text" data-bind="value: newBucketTitle"/>
            <a href="#" id="a1" data-bind="click: createBucketItem">
                <img src="../images/add.png" alt="add"/>
            </a>
        </div>
        <div id="message" style="width: 100%; padding-top: 10px; padding-bottom: 10px; float: left;"></div>
    </div>
</body>
</html>
